<template>
  <div class="com-container">
    <div class="title" :style="comStyle">
      <span :style="comStyle">{{'▎'+showTitle}}</span>
      <span class="iconfont title-icon" @click="showChoice=!showChoice" :style="comStyle">&#xe6eb;</span>

      <div
        :style="marginStyle"
        class="title-item"
        v-for="item in selectTypes"
        :key="item.key"
        v-show="showChoice"
        @click="handleSelect(item.key)"
      >{{item.text}}</div>
    </div>
    <div class="com-chart" ref="trend_ref"></div>
  </div>
</template>
<script>
import { mapState } from "vuex";
import { getThemeValue } from "@/utils/theme_utils.js";
export default {
  data() {
    return {
      allData: null,
      echartInstance: null, //服务器获取过来的数据
      showChoice: false, //是否显示可选项
      choiceType: "map", //显示的数据
      fontSize: 0
    };
  },
  created() {
    this.$socket.registerCallBack("trendData", this.getData);
  },
  mounted() {
    this.initChart();
    // this.getData();
    // 发送数据
    this.$socket.send({
      action: "getData",
      socketType: "trendData",
      chartName: "trend",
      value: ""
    });
    window.addEventListener("resize", this.screenAdapter);
    // 在刚进入页面时，主动进行屏幕适配
    this.screenAdapter();
  },
  destroyed() {
    window.removeEventListener("resize", this.screenAdapter);
    this.$socket.unRegisterCallBack("trendData");
  },
  computed: {
    ...mapState(["theme"]),
    selectTypes() {
      if (!this.allData) {
        return [];
      } else {
        return this.allData.type.filter(item => {
          return item.key !== this.choiceType;
        });
      }
    },
    showTitle() {
      if (!this.allData) {
        return "";
      } else {
        return this.allData[this.choiceType].title;
      }
    },
    comStyle() {
      return {
        fontSize: this.fontSize + "px",
        color: getThemeValue(this.theme).titleColor
      };
    },
    marginStyle() {
      return {
        marginLeft: this.fontSize / 3 + "px",
        fontWeight: 600
      };
    }
  },
  methods: {
    handleSelect(currentType) {
      this.choiceType = currentType;
      this.updateChart();
      this.showChoice = false;
    },
    initChart() {
      this.echartInstance = this.$echarts.init(
        this.$refs.trend_ref,
        this.theme
      );
      const initOption = {
        tooltip: {
          trigger: "axis"
        },
        xAxis: {
          type: "category",
          boundaryGap: false //紧挨边缘
        },
        legend: {
          top: "15%",
          left: 20
        },
        yAxis: {
          type: "value"
        }
      };
      this.echartInstance.setOption(initOption);
    },
    getData(ret) {
      this.allData = ret;
      this.updateChart();
    },
    updateChart() {
      // 处理数据
      // 类目轴数据
      const timeArr = this.allData.common.month;
      console.log(timeArr);
      // y轴数据，series 的数据
      const valueArr = this.allData[this.choiceType].data;
      const seriesArr = valueArr.map(item => {
        return {
          name: item.name,
          type: "line",
          data: item.data,
          stack: this.choiceType //堆叠图效果
          // areaStyle: {
          //   opacity: 0.8,
          //   // 颜色渐变，感觉不好看
          //   color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          //     {
          //       offset: 0,
          //       color: "rgba(128, 255, 165)"
          //     },
          //     {
          //       offset: 1,
          //       color: "rgba(1, 191, 236)"
          //     }
          //   ])
          // }
        };
      });
      // 图例数据
      const legendArr = valueArr.map(item => {
        return item.name;
      });
      const dataOption = {
        grid: {
          top: "25%",
          left: "3%",
          bottom: "3%",
          right: "6%",
          containLabel: true //包含坐标轴上的文字
        },
        legend: {
          data: legendArr
        },
        xAxis: {
          data: timeArr
        },
        series: seriesArr
      };
      this.echartInstance.setOption(dataOption);
    },
    // 屏幕适配
    screenAdapter() {
      this.fontSize = (this.$refs.trend_ref.offsetWidth / 100) * 3.6;
      // 分辨率相关配置相关
      const adapterOption = {
        legend: {
          itemWidth: this.fontSize * 1.5,
          itemHeight: this.fontSize * 1.5,
          itemGap: this.fontSize / 2,
          textStyle: {
            fontSize: this.fontSize / 1.5
          }
        }
      };
      this.echartInstance.setOption(adapterOption);
      this.echartInstance.resize();
    }
  },
  watch: {
    theme() {
      // 销毁当前图表
      this.echartInstance.dispose();
      // 重新创建图表
      this.initChart();
      // 完成屏幕适配
      this.screenAdapter();
      // 更新图表的展示
      this.updateChart();
    }
  }
};
</script>
<style scoped lang='less'>
.title {
  position: absolute;
  top: 20px;
  left: 20px;
  z-index: 9;
  color: white;
  font-size: 1.5rem;
  .title-icon {
    margin-left: 10px;
    cursor: pointer;
  }
}
</style>